<template>

    
    <div class="home-container">
        
        <van-nav-bar title="订单" class="nav-bar" />
        <h2>总价：{{ checktotal }}</h2>
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            

        >
            <van-cell v-for="item in cartdata" style="display: flex;" >

            <div style="display: flex;">
                <div class="cell-content">
                    <div>
                    商品名称 {{ item.name }} 
                    </div>
                    <div>
                    价格 {{ item.price }}
                    </div>
                    <div>
                    数量{{ item.count}} 
                    </div>
                    <div>
                    总价{{ item.price * item.count }}
                    </div>
                </div>
            </div>
            </van-cell>
        </van-list>


        <van-field
            v-model="localValue"
            is-link
            readonly
            label="地区"
            placeholder="请选择所在地区"
            @click="show = true"
        />
        <van-popup v-model:show="show" round position="bottom">
        <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
        />
        </van-popup>



        <van-field
        v-model="result"
        is-link
        readonly
        name="picker"
        label="优惠卷"
        placeholder="点击选择优惠卷"
        @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-picker
            :columns="columns"
            :model-value="pickerValue"
            @confirm="onConfirm"
            @cancel="handleCancel"
        />
        </van-popup>




        <button @click="submit">提交</button>




    </div>





</template>




<script setup>
import { ref, onMounted,watch } from 'vue';
import axios from 'axios';
import { useCascaderAreaData } from '@vant/area-data';


const total = ref(null);

const cartdata = ref([]);

const loading = ref(false);
const finished = ref(false);

const show = ref(false);

const options = useCascaderAreaData();

const localValue = ref('');
const cascaderValue = ref('');

const showPicker = ref(false);

const couponValue = ref({});


const columns = ref([])



const pickerValue = ref([]);


const result = ref('');


const checktotal = ref('');







const onConfirm = ({ selectedValues, selectedOptions }) => {
    result.value = selectedOptions[0].text;
    pickerValue.value = selectedValues;
    showPicker.value = false;

};






const onFinish = ({ selectedOptions }) => {
    show.value = false;
    localValue.value = selectedOptions.map((option) => option.text).join('/');
};



watch(pickerValue, (newValue, oldValue) => {
    const id = newValue[0] || null;
    if (id) {
        checktotal.value = total.value - couponValue.value[id].coupon__reduction
    }
    else {
        checktotal.value = total.value
    }


});




const onLoad = () => {
    axios.get('http://127.0.0.1:8000/order/getorder/?user_id=1')
    .then(res => {
        console.log(res)
        cartdata.value = res.data.cart
        total.value = res.data.total
        checktotal.value = res.data.total

        couponValue.value = res.data.coupons.reduce((accumulator, coupon) => {
            accumulator[coupon.id] = coupon;
            return accumulator;
        }, {});
        columns.value = res.data.coupons.map(item => ({"text":item.coupon__name,"value":item.id}));
        loading.value = false;
        finished.value = true;
    })

};


const handleCancel = () => {
  showPicker.value = false;
  pickerValue.value = []; // 重置pickerValue
  result.value = ''; // 重置result
};




const submit = () => {
    const data = {
        user_id:1,
        address:localValue.value,
        coupon_id:pickerValue.value[0] || 0,
    }

    axios.post('http://127.0.0.1:8000/order/getorder/',data)
   .then(res => {
        console.log(res)
    })



}



</script>




<style scoped>
.home-container {
  width: 400px;
  height: 700px;
  background: white;
  position: relative;
  left: 50%;
  top: 100px;
  border-radius: 20px;
  transform: translate(-50%);
  display: flex; /* 添加 Flexbox 布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  overflow: auto; /* 添加滚动条 */
  scrollbar-width: none; /* Firefox */
}

.nav-bar {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.cell-content {
    text-align: left;
    display: flex;
    width: 50%;
    flex-direction: column; /* 垂直方向排列子元素 */

}



</style>